<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <style>
            /* 通配符选择器 */
            * {
                margin: 0;
                padding: 0;
            }
            /* 标签选择器（元素选择器） */
            h1 {
                text-align: center;
                color: red;
                margin-top: 20px;
            }
            /* ID选择器 */
            #fruits {
                width: 320px;
                margin: 10px auto;
            }
            /* 类选择器 */
            .item {
                text-align: center;
                list-style: none;
                width: 320px;
                height: 40px;
                background-color: darkgreen;
                color: white;
                margin-top: 2px;
                line-height: 40px;
                font-size: 22px;
            }
        </style>
    </head>
    <body>
        <!--
        前端页面 = Tag + CSS + JavaScript
        Tag - 承载内容 - content
        CSS - 层叠样式表 - 页面显示 - display
            ~ 内嵌样式表（通过标签的style属性设置样式，不推荐使用）
            ~ 内部样式表（在head部分通过style标签插入CSS选择器）
            ~ 外部样式表（单独的文件，使用link标签引入进来）
        JS  - 交互行为 - behavior
        浏览器中的JavaScript有三个要素：
            ~ ECMAScript - ES - 语法规范（关键字、运算符、分支、循环、对象、函数、……）
            ~ BOM - Browser Object Model - 浏览器对象模型 - window
                - location / history / screen / navigator
                - alert() / prompt() / confirm() / open() / close()
                - setTimeout() / setInterval()
            ~ DOM - Document Object Model - 文档对象模型 - document
                - querySelector() / querySelectorAll() - 通过CSS选择器获取页面上的标签
                - createElement() - 创建新标签
                - appendChild() / insertBefore() - 添加新标签
                - removeChild() - 删除标签
                - textContent / innerHTML - 修改标签内容
                - style - 修改标签样式
        -->
        <h1>今日推荐的水果</h1>
        <hr>
        <ul id="fruits">
            <li class="item" v-for="fruit in selected_fruits">{{ fruit }}</li>
        </ul>

        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
        <script>
            let app = new Vue({
                el:'#fruits',
                data:{
                    selected_fruits:[]
                },
                // created(){
                //     // Promise对象
                //     let p = fetch('/api/fruits')
                //     p.then(function (resp){
                //         return resp.json()
                //     })
                // }
                created(){
                    // Promise对象
                    fetch('/api/fruits')
                        .then(resp => resp.json())
                        .then(json => this.selected_fruits=json.fruits)

                        // .then(function (resp){return resp.json()})
                        // .then(function (json){this.selected_fruits=json.fruies})
                }
            })
        </script>
    </body>
</html>